<script setup>
import { includes, map } from 'lodash-es';
import { useRequest } from '@/hooks/requestHooks.js';
import { useWatch } from '@/hooks/useWatch.js';
import { getBuildingByArea } from '@/api/index.js';
import { Message } from 'element-ui';

const { proxy } = getCurrentInstance();
const props = defineProps({
  type: {
    type: String,
    default: () => 'TG',
  },
});
const emit = defineEmits(['handleReport']);
const visible = ref(false);
const filterText = ref('');
// const searchLoading = ref(false);
const searchList = ref([]);
const checkList = ref([]);
const [enterpriseList, searchLoading, run] = useRequest(getBuildingByArea, {
  cacheTime: 60 * 60 * 1000, // 5 minutes
  staleTime: 60 * 60 * 1000, // 5 minutes
  cacheKey: params => params?.[0].projectType,
  defaultParams: [{ projectType: props.type }],
});
const changeInput = () => {
  if (filterText.value.length > 0) {
    searchLoading.value = true;
    searchList.value = [];
    map(enterpriseList.value, v => {
      includes(v.enterpriseName, filterText.value) ? searchList.value.push(v) : null;
    });

    visible.value = true;
    searchLoading.value = false;
  } else {
    visible.value = false;
  }
};
const selectSearchItem = item => {
  if (checkList.value.length === enterpriseList.value.length) {
    checkList.value = [item];
  } else {
    !includes(checkList.value, item) ? checkList.value.push(item) : null;
  }
  visible.value = false;
};
const handleFocus = () => {
  visible.value = filterText.value.length > 0 ? true : false;
};
const currentStyles = (id, item) => {
  if (proxy.$store.state.global.setting.sideTheme === 'theme-light') {
    return id === item ? { backgroundColor: '#bfd7df' } : '';
  } else {
    return id === item ? { backgroundColor: 'rgba(0, 0, 0, 0.6)' } : '';
  }
};

const handleReport = () => {
  checkList.value.length > 0 ? emit('handleReport', checkList.value) : Message.warning('请选择要报告的机构');
};

useWatch(
  () => props.type,
  n => run({ projectType: n }),
);
defineExpose({ checkList });
</script>
<template>
  <div class="u-h100" v-loading="searchLoading">
    <div class="se-input">
      <el-popover placement="bottom" width="290" trigger="manual" v-model="visible" popper-class="u-base-fg">
        <ul
          v-show="filterText.length > 0 && searchList.length !== 0"
          class="su-searchBox"
          :class="$store.state.global.setting.sideTheme === 'theme-light' ? 'su-searchBox-light' : 'su-searchBox-dark'"
          v-loading="searchLoading"
        >
          <li
            v-for="item in searchList"
            :key="item.enterpriseCode"
            :title="item.enterpriseName"
            @click="selectSearchItem(item)"
          >
            {{ item.enterpriseName }}
          </li>
        </ul>
        <div v-show="searchList.length === 0" style="text-align: center; min-height: 100px">无数据</div>
        <el-input
          prefix-icon="el-icon-search"
          size="small"
          slot="reference"
          placeholder="查询"
          @input="changeInput(filterText)"
          @blur="visible = false"
          @focus="handleFocus"
          v-model="filterText"
          clearable
        ></el-input>
      </el-popover>
    </div>
    <el-divider></el-divider>
    <div class="entSubAll-checkboxWrapper">
      <el-checkbox-group
        v-if="enterpriseList?.length > 0"
        v-model="checkList"
        v-loading="searchLoading"
        class="entSubAll-checkboxList u-df-st u-fd-col"
      >
        <el-checkbox v-for="item in enterpriseList" :key="item.enterpriseCode" :label="item" :title="item.enterpriseName">
          {{ item.enterpriseName }}
        </el-checkbox>
      </el-checkbox-group>
      <div v-else class="u-df-ct u-fs14 u-mt20 u-sec-text" style="height: calc(100% - 93px)">暂无数据</div>
      <el-button type="primary" size="small" class="rep-btn" @click="handleReport">生成报告</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.se-input {
  padding: 20px 20px 0 20px;
}
.entSubAll-checkboxWrapper {
  padding: 0 20px;
  width: 100%;
  height: calc(100% - 93px);
}
.entSubAll-checkboxList {
  align-items: flex-start;
  height: calc(100% - 70px);
  overflow-y: auto;
  .el-checkbox {
    width: 100%;
    margin: 0;
    padding: 5px;
  }
}
.rep-btn {
  width: 100%;
  height: 30px;
  padding: 0;
  line-height: 1;
  margin-top: 20px;
  margin-bottom: 20px;
}
.app-dark .entSubAll-checkboxList :deep(.el-checkbox:hover) {
  background-color: rgba(0, 0, 0, 0.6);
}
.app-light .entSubAll-checkboxList :deep(.el-checkbox:hover) {
  background-color: #bfd7df;
}
</style>
